<template>
  <view>
    <AddressForm ref="form" type="editor">
      <template v-slot:navbar>
        <uni-nav-bar title="编辑地址" color="#333" left-icon="left" @clickLeft="navBack" statusBar></uni-nav-bar>
      </template>
      <view class="flex-center btn" @click="save">保存</view>
    </AddressForm>
  </view>
</template>

<script setup lang="ts">
import { useAddressStore } from '@/stores/address';
import { getDriverID } from '@/stores/driverID';
import { navBack } from '@/utils/navigator';
import { errorToast, showLoading, successToast } from '@/utils/prompt';
import AddressForm from '@c/address/AddressForm.vue';
import { toPublish } from '@mqtt';
import { ref } from 'vue';
// static
const driver_id = getDriverID();
const addressStore = useAddressStore();
// refs
const form = ref(null);
const repeat = ref(true); //放重复点击
function save() {
  if (form.value.checkForm()) {
    showLoading('正在保存');
    if (!repeat.value) {
      return;
    }
    repeat.value = false;
    const payload = {
      driver_id,
      ...form.value.getAddressInfo(),
    };
    toPublish('driver/editAddress', payload, (obj: any) => {
      const { code } = obj;
      if (code === 1) {
        repeat.value = true;
        addressStore.getList();
        successToast('保存成功');
        setTimeout(navBack, 1500);
      } else {
        repeat.value = true;
        errorToast('保存失败');
      }
    });
  }
}
</script>

<style scoped lang="less">
.card {
  margin-top: 20rpx;
  width: 690rpx;
  background: white;
  border-radius: 5px;
  box-shadow: 0rpx 0rpx 51rpx 0rpx rgba(179, 179, 179, 0.25);
}

.item-box {
  height: 120rpx;
  padding: 0 30rpx;
  font-size: 30rpx;
  color: #333;
  display: grid;
  grid-template-columns: 130rpx 470rpx;
  column-gap: 30rpx;
  align-items: center;

  &.split-line {
    border-bottom: 2rpx solid rgba(238, 238, 238, 0.6);
  }

  .pick-block {
    color: #666;
    display: grid;
    grid-template-columns: 450rpx 20rpx;
  }
}

.item-addr-box {
  height: 120rpx;
  padding: 0 30rpx;
  font-size: 30rpx;
  color: #333;
  display: grid;
  align-items: center;
}

.btn {
  margin-top: 360rpx;
  width: 370rpx;
  height: 80rpx;
  font-size: 36rpx;
  color: white;
  background: linear-gradient(104deg, #41a3ff, #1b91ff);
  border-radius: 5px;
}
</style>
